<template>
  <div class="search-main-box">
    <!-- <i class="iconfont icon-sousuo"></i> -->
    <div class="sear-box">
      <i class="iconfont icon-sousuo" @click="searchProject"></i>
      <input
        class="search-input"
        v-model="input"
        placeholder="请输入搜索内容"
        @keyup.enter="searchProject"
        @blur="searchProject"
      />
    </div>
    <!-- <el-input
      prefix-icon="iconfont icon-sousuo"
      v-model="input"
      placeholder="请输入搜索内容"
      @change="searchProject"
    >
    </el-input> -->

    <el-select
      v-if="type === 'project'"
      v-model="stage"
      placeholder="请选择阶段"
      @change="selectStage"
    >
      <el-option
        v-for="(item, index) in stageOption"
        :key="index"
        :label="item.stageName"
        :value="item.proStage"
      >
      </el-option>
    </el-select>
    <div class="files-box" v-if="type === 'fileList'">
      <div>
        <el-select
            class="file-type-select files-type-input"
            style="width: 100%;"
            v-model="fileType"
            filterable 
            allow-create
            popper-class="file-type-box"
            placeholder="请选择证书类型"
            @change="getFilesList"
          >
            <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.dicvalue" :value="item.dickey"></el-option>
          </el-select>
      </div>
      <div>
        <el-select
            v-if="type === 'fileList'"
            class="files-type-input"
            style="width: 100%;"
            v-model="unit"
            placeholder="请选择单位"
            filterable allow-create
            @change="getFilesList"
          >
            <el-option
              v-for="(item, index) in unitOptions"
              :key="index"
              :label="item.dicvalue"
              :value="item.dickey"
            >
            </el-option>
          </el-select>
      </div>
        <div>
          <el-select
              class="files-type-input"
              style="width: 100%;"
              v-model="timType"
              placeholder="请选择日期类型"
              @change="getFilesList"
              filterable allow-create
              >
                <el-option v-for="(item, index) in timeOptions" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
        </div>
        <div class="files-type-time">
          <el-date-picker
          style="width: 100%;margin-left: 5px;"
          v-model="time"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
           @change="getFilesList"
          >
        </el-date-picker>
        </div>
        <div style="width: 10%;margin-left: 5px;">
          <el-checkbox v-model="isValid" @change="getFilesList">有效证书</el-checkbox>
        </div>
    </div>
    <el-select
      v-if="type === 'dic'"
      v-model="fileType"
      placeholder="请选择字典类型"
      @change="selectDicTypeType"
      >
        <el-option v-for="(item, index) in dicOptions" :key="index" :label="item.label" :value="item.label"></el-option>
      </el-select>
      <div class="daily-search-box" v-if="type === 'daily'">
      <el-date-picker
        v-model="selectTime"
        type="date"
        placeholder="选择筛选日期"
        @change="handleTime"
      >
      </el-date-picker>
      <el-select
        v-model="person"
        placeholder="请选择填报人"
        @change="selectPerson"
      >
        <el-option
          v-for="(item, index) in personOption"
          :key="index"
          :label="item.empname"
          :value="item.empname"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import fixTime from '@/utils/fixTime.js'
import {
  getStageProjectListApi,
  getEmpolyeeListApi,
  getDailyInfoListApi,
  getDictionaryListApi
} from '@/api/index'
export default {
  props: {
    getAllProjectData: {
      type: Function,
      default: null
    },
    searchDailyInfo: {
      type: Function,
      default: null
    }, 
    setShowFileData: {
      type: Function,
      default: null
    }, 
    searchDicType: {
      type: Function,
      default: null
    }, 
    type: {
      type: String,
      default: null
    },
    typeOptions: {
      type: Array,
      default: null
    },
    dicOptions: {
      type: Array,
      default: null
    }
  },
  data () {
    return {
      input: '',
      // 选择的阶段
      stage: 'ShowAll',
      // 阶段源数据
      stageOption: [
        {
          proStage: 'ShowAll',
          stageName: '所有阶段'
        },
        {
          proStage: 'SalesResearch',
          stageName: '售前调研'
        },
        {
          proStage: 'Develop',
          stageName: '研发阶段'
        },
        {
          proStage: 'ElectricImplement',
          stageName: '电气实施'
        },
        {
          proStage: 'Design',
          stageName: '产品设计'
        },
        {
          proStage: 'DebugTogether',
          stageName: '联调阶段'
        },
        {
          proStage: 'Waiting4Sign',
          stageName: '等待验收'
        },
        {
          proStage: 'Finish',
          stageName: '已完成'
        }
      ],
      // 选择的人
      person: '全部填报人',
      // 选择文件类型
      fileType: '',
      // 人员数据
      personOption: [
        {
          empname: '全部填报人',
          empcode: 'showAll'
        }
      ],
      // 选择的日期
      selectTime: '',
      // 单位数据源
      unitOptions: [],
      // 单位
      unit: '',
      // 时间类型options
      timeOptions: [
        {
          label: '获得日期',
          value: 'gettime'
        },
        {
          label: '有效开始日期',
          value: 'begintime'
        },
        {
          label: '有效截止日期',
          value: 'finishtime'
        }
      ],
      // 时间类型
      timType: '',
      pickerOptions: {
        shortcuts: [ {
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [ start, end ])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [ start, end ])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [ start, end ])
          }
        } ]
      },
      time: [],
      // 是否有效
      isValid: false
    }
  },
  mounted () {
    this.getEmpolyeeList()
    this.getUnitOptions()
    if (this.type === 'fileList') {
      this.stageOption = this.typeOptions
      // this.fileType = '全部类型'
    }
    console.log('type----------->', this.type, this.typeOptions)
  },
  methods: {
    // 获取人员信息
    async getEmpolyeeList () {
      let res = await getEmpolyeeListApi()
      res.forEach(item => {
        this.personOption.push(item)
      })
    },
    searchProject () {
      this.searchProjectData()
    },

    // 获取类型列表
    async getUnitOptions () {
      let data = {
        skipcount: 0,
        maxresultcount: 100000
      }
      let res = await getDictionaryListApi(data)
      this.unitOptions = []
      res.dicdatas.forEach(item => {
        switch (item.typename) {
        // case 'Stage':
        //   this.stageOptions.push(item)
        //   break
        case 'Company':
          this.unitOptions.push(item)
          break
        // case 'Issuing':
        //   this.organOptions.push(item)
        //   break
        }
      })
      console.log('下拉框数据源-------->', this.unitOptions)
    },

    //  根据条件搜索
    async searchProjectData () {
      let data = {
        code: this.input
      }
      let res
      if (this.type === 'project') {
        res = await getStageProjectListApi(data)
        if (res.length) {
          this.getAllProjectData(res)
        } else {
          this.$message.error('未找到相关项目！请确认搜索条件！')
        }
      } else if (this.type === 'fileList') {
        this.selectFileType() 
      } else {
        res = await getDailyInfoListApi(data)
        if (res.length) {
          this.searchDailyInfo(this.input, 2)
        } else if (type === 'dic') {
          this.getDictionaryList(data)
        } else {
          this.$message.error('未找到相关项目！请确认搜索条件！')
        }
      }
    },

    // 选择阶段
    async selectStage (value) {
      // let res
      if (value !== 'ShowAll') {
        // let data = {
        //   prostage: value
        // }
        this.getAllProjectData(value)
      } else {
        this.getAllProjectData(' ')
      }
      // this.setShowProData(res)
    },
    // 选择类型
    async selectFileType (value) {
      let data = {
        keyWord: this.input,
        type: value
      }
      this.setShowFileData(data)
    },
    
    getFilesList (label = null) {
      if ((!this.timType && this.time.lengt)) {
        this.$message.warning('请选择时间类型！')
        return
      }
      //  else if (this.timType && !this.time.lengt) {
      //   this.$message.warning('请选择开始时间和结束时间！')
      //   return
      // }
      let data = {
        keyWord: this.input,
        type: (this.fileType === '全部类型') ? '' : this.fileType,
        timetype: this.timType,
        starttime: this.time.length ? fixTime(this.time[0]) : '',
        endtime: this.time.length ? fixTime(this.time[1]) : '',
        company: this.unit,
        isValid: this.isValid ? this.isValid : null,
        skipcount: 0,
        maxresultcount: 10,
        labels: label
      }
      console.log('时间---->', data)
      this.setShowFileData(data)
    },

    // 选择人员
    async selectPerson (value) {
      if (value === '全部填报人') {
        this.searchDailyInfo(' ', 0)
      } else {
        this.searchDailyInfo(value, 0)
      }
    },
    // 选择字典类型
    async selectDicTypeType (value) {
      this.searchDicType(value)
    },

    // 选择时间
    async handleTime (value) {
      // let data = {
      //   createtime: value
      // }
      // let res = await getDailyInfoListApi(data)
      this.searchDailyInfo(value, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.search-main-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 5vh;

  /* border: 1px solid red; */
  .daily-search-box {
    /* border: 1px solid red; */
    width: 90%;
    .el-select {
      width: 150px;
      margin-right: 15px;
    }
  }
  .sear-box {
    display: flex;
    align-items: center;
    width: 15%;
    height: 30px;
    margin-right: 10px;
    padding-left: 4px;
    line-height: 30px;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    .search-input {
      width: 100%;
      height: 24px;
      margin-left: 5px;
      border: none;
    }
  }
  .files-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 90%;

    /* border: 1px solid green; */
    >div {
      width: 18%;

      /* border: 1px solid green; */
    }
    .files-type-time {
      width: 30%;

      /* border: 1px solid red; */
    }
  }
  .el-input {
    width: 200px;
  }
  .el-select {
    width: 150px;
    margin-left: 7px;
  }
}

@media screen and (width <= 768px) {
  .main-box {
    display: flex;
    flex-direction: row;

    /* border: 1px solid red; */
    width: 99vw;
    height: 5vh;
    .daily-search-box {
      /* border: 1px solid red; */
      width: 100%;
      .el-select {
        width: 15%;
        margin-right: 15px;
      }
    }
    .sear-box {
      width: 40%;
      height: 30px;
      margin-right: 10px;
      padding-left: 4px;
      line-height: 30px;
      border: 1px solid #dcdfe6;
      border-radius: 5px;
      .search-input {
        width: 80%;
        height: 24px;
        margin-left: 5px;
        border: none;
      }
    }
    .el-input {
      width: 200px;
    }
    .el-select {
      width: 150px;
      margin-left: 7px;
    }
  }
}
</style>
<style lang="scss">
.files-type-input {
  width: 100%;
}
.file-type-box {
  height: 500px;

  /* border: 1px solid red; */
  .el-select-dropdown__wrap {
    max-height: 504px;
  }
}
</style>
